<template>
  <div class="outmain ba_f heighthv pad_20 bor_rad5">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>优惠券</span>
      </div>
    </div>
    <div class="pad_20 flex-bet flex-y-top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
        <el-form-item label="优惠券名称">
          <el-input v-model="formInline.name" size="medium" placeholder="请输入优惠券名称" @input="onSearch"></el-input>
        </el-form-item>
        <el-form-item label="优惠券类型">
          <el-select v-model="formInline.type" placeholder="请选择" @change="onSearch">
            <el-option v-for="item in labelOptions" :key="item.label" :label="item.value" :value="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="flex-x-end">
        <el-button type="primary" @click="addCoupon">立即创建</el-button>
      </div>
    </div>
    <div class="tabledata mar_t20">
      <el-table :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" stripe style="width: 100%">
        <el-table-column prop="name" label="优惠券名称" align="center"></el-table-column>
        <el-table-column prop="type" label="优惠券类型" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.type=='1'">优惠券</div>
            <div v-if="scope.row.type=='2'">折扣券</div>
          </template>
        </el-table-column>
        <el-table-column prop="isFull" label="优惠内容" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.isFull=='1' && scope.row.type=='1'">无门槛 减{{scope.row.money}}</div>
            <div v-if="scope.row.isFull=='1' && scope.row.type=='2'">无门槛 打{{scope.row.discount}}折</div>
            <div v-if="scope.row.isFull=='2' && scope.row.type=='1'">满{{scope.row.fullMoney}} 减{{scope.row.money}}</div>
            <div v-if="scope.row.isFull=='2' && scope.row.type=='2'">满{{scope.row.fullMoney}} 打{{scope.row.discount}}折</div>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间时间" align="center"></el-table-column>
        <el-table-column prop="display" label="状态" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.display" active-value="1" inactive-value="2" @change="changeSwitch(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit2(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>
<script>
import { vip_couponList, vip_saveCoupon } from '@/api/plug';

export default {
  created() {
    this.fetchData();
  },
  data() {
    return {
      formInline: {
        name: '',
        type: ''
      },
      list: [],
      listLoading: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      labelOptions: [
        {
          label: 1,
          value: '优惠券'
        },
        {
          label: 2,
          value: '折扣券'
        }
      ]
    };
  },
  methods: {
    addCoupon() {
      this.$router.push({
        path: '/vip-cupon-add'
      });
    },
    async fetchData() {
      this.listLoading = true;
      const { data, count } = await vip_couponList({ page: this.page.currentPage, name: this.formInline.name, type: this.formInline.type });
      this.list = data;
      this.page.total = count;
      this.listLoading = false;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    onSearch() {
      this.fetchData();
    },
    async changeSwitch(row) {
      const { msg } = await vip_saveCoupon({ id: row.id, display: row.display, type: 1 });
      this.$baseMessage(msg, 'success');
      this.fetchData();
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await vip_saveCoupon({ id: row.id, type: 2 });
          this.$baseMessage(msg, 'success');
          this.fetchData();
        });
      } else {
        if (this.selectRows.length > 0) {
          const id = this.selectRows.map((item) => item.id);
          this.$baseConfirm('你确定要删除选中项吗', null, async () => {
            const { msg } = await vip_saveCoupon({ id, type: 2 });
            this.$baseMessage(msg, 'success');
            this.fetchData();
          });
        } else {
          this.$baseMessage('未选中任何行', 'error');
          return false;
        }
      }
    },
    handletj() {
      this.$router.push({ path: 'deliverytongji' });
    },
    handleEdit(type) {
      if (type) {
        this.$router.push(`/couponAdd?type=${type}`);
      } else {
        this.$router.push({ path: 'couponAdd' });
      }
    },
    handleEdit2(row) {
      if (row.id) {
        this.$router.push({
          path: '/vip-cupon-add',
          query: {
            id: row.id,
            type: row.type
          }
        });
      } else {
        this.$router.push({ path: '/vip-cupon-add' });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.coupon-item {
  white-space: nowrap;
  padding: 20px 27px 17px;
  display: flex;
  flex-direction: column;
  background: rgba(51, 136, 255, 0.07);
  margin-right: 20px;
  flex: 1;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
}
</style>
